<script setup>
// 导入Vue的计算属性和购物车状态管理
import { computed } from 'vue';
import { useCartStore } from '../stores/cart';
import { RouterLink } from 'vue-router';

/**
 * 商品卡片组件 - 用于展示单个商品信息并提供交互功能
 * 这个组件用于展示单个商品的信息，并提供查看详情和加入购物车的交互功能。
 * Props:
 * - product: 商品对象，包含以下属性:
 *   - id: 商品ID
 *   - name: 商品名称
 *   - price: 商品价格
 *   - description: 商品描述
 *   - image: 商品图片URL
 */
const props = defineProps({
  product: {
    type: Object,
    required: true,
  },
});

// 获取购物车状态管理实例
const cartStore = useCartStore();

/**
 * 将当前商品添加到购物车
 * 调用购物车store中的addProduct方法，并传入当前商品对象
 */
function addToCart() {
  cartStore.addProduct(props.product);
}
</script>

<template>
  <!-- 商品卡片容器 -->
  <div class="product-card">
    <!-- 商品图片区域 -->
    <div class="product-image">
      <img :src="product.image" :alt="product.name" />
    </div>
    
    <!-- 商品信息区域 -->
    <div class="product-info">
      <!-- 商品名称 -->
      <h3>{{ product.name }}</h3>
      
      <!-- 商品价格，保留两位小数 -->
      <p class="price">¥{{ product.price.toFixed(2) }}</p>
      
      <!-- 商品描述 -->
      <p class="description">{{ product.description }}</p>
      
      <!-- 操作按钮区域 -->
      <div class="actions">
        <!-- 查看详情链接，使用路由参数传递商品ID -->
        <RouterLink :to="{ name: 'product', params: { id: product.id } }">
          查看详情
        </RouterLink>
        
        <!-- 加入购物车按钮，点击时调用addToCart方法 -->
        <button @click="addToCart">加入购物车</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  width: 100%;
  max-width: 200px;
  margin: 0 10px 20px 10px;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.product-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 15px;
}

.product-info h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
}

.product-info .price {
  color: #e53935;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.product-info .description {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.actions a {
  color: #42b983;
  text-decoration: none;
  font-weight: bold;
}

.actions button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.actions button:hover {
  background-color: #388e3c;
}
</style>